<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        /* 设置开头 */
        .container header {
            background: rgb(5, 174, 235);
            padding: 15px;
            color: #fff;
            line-height: 50px;
        }

        /* 设置搜索框和下面的内容 */
        .contact-list-wrapper {
            background: #7d8392;
            padding: 20px 30px;
        }

        .search-box {
            /* 相对浏览器定位 */
            position: relative;
            margin-bottom: 20px;
        }

        /* 设置搜索框 */
        .search-box input {
            width: 100%;
            height: 40px;
            border-radius: 2px;
            border: 0;
            text-indent: 10px;
        }

        /* 设置x图标 */
        #btn-clear {
            /* 绝对定位，按坐标 */
            position: absolute;
            right: 10px;
            top: 10px;
            display: none;
            cursor: pointer;
        }

        .contact-list li {
            background: #fff;
            margin-bottom: 20px;
            border-radius: 2px;
            padding: 20px;
        }

        .contact-list li p.name {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>电话簿</header>
        <div class="contact-list-wrapper">
            <div class="search-box">
                <input id="search-input" type="text" placeholder="搜索联系人">
                <span id="btn-clear">x</span>
            </div>
            <ul class="contact-list">
                <!-- <li>
                    <p class="name">xxx</p>
                    <p class="tel">12346789</p>
                </li>
                <li>
                    <p class="name">xxx</p>
                    <p class="tel">12346789</p>
                </li> -->
            </ul>
        </div>
    </div>

    <script>
        const contactData = [
            { name: "Amy", tel: "1234567885" },
            { name: "Bob", tel: "12267962727" },
            { name: "ADany", tel: "1346457322" },
            { name: "Jennie", tel: "1346597677" },
        ]

        const contactList = document.querySelector('.contact-list')
        const searchInput = document.querySelector('#search-input')
        const btnClear = document.querySelector('#btn-clear')

        contactData.forEach((item) => {
            contactList.insertAdjacentHTML('beforeend', `
            <li>
                <p class="name">${item.name}</p>
                <p class="tel">${item.tel}</p>
            </li>   
            `)
        })

        // 给输入框绑定键盘事件
        searchInput.addEventListener('keyup', (e) => {
            // searchInput.value
            // e.keyCode
            // 过滤
            if (e.keyCode >= 48 && e.keyCode <= 57 ||
                e.keyCode >= 65 && e.keyCode <= 90 ||
                e.keyCode === 8
            ) {
                const result = contactData.filter((item) => {
                    const reg = new RegExp(searchInput.value, 'i')
                    if (item.name.search(reg) != -1 || item.tel.search(reg) != -1) {
                        return item
                    }
                })
                // 搜索后内容为空
                contactList.innerHTML = ''

                result.forEach((item) => {
                    contactList.insertAdjacentHTML('beforeend', `
                     <li>
                        <p class="name">${item.name}</p>
                        <p class="tel">${item.tel}</p>
                     </li>
                    `)
                })

                // 隐藏x按钮
                if (searchInput.value.trim() === '') {
                    btnClear.style.display = 'none'
                } else {
                    btnClear.style.display = 'initial'
                }

            }

        }, false)

        btnClear.onclick = function () {
            searchInput.value = ''
            contactList.innerHTML = ''
            contactData.forEach((item) => {
                contactList.insertAdjacentHTML('beforeend', `
            <li>
                <p class="name">${item.name}</p>
                <p class="tel">${item.tel}</p>
            </li>   
            `)
            })
        }

    </script>
</body>

</html>